<template>
<div>
    <div :class='animate' style="background-color: pink">
      hello world    
    </div>  
   <button @click="btn">{{btnText}}</button>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      animate:{
        // animation: true,
        // transition:true,
        // blue:false,
        // pink:true
        start:true,
        end:false,
        collapse:true
      },
      btnText:'开启动画'
    }
  },
  watch: {
  },
  created () {
  },
  methods: {
    btn(){
      //  this.animate.animation = !this.animate.animation
      //  this.animate.blue =!this.animate.blue
      //  this.animate.pink =!this.animate.pink
      // if(this.animate.animation)
      //   this.btnText = '关闭动画'
      // else
      // this.btnText = '开启动画'

      //this.animate.collapse = !this.animate.collapse
      this.animate.srart = !this.animate.srart
      this.animate.end = !this.animate.end

    }
  }
}
</script>

<style scoped>

@keyframes move {
  0%{
    transform: translateX(100px);
  }
   50%{
    transform: translateX(50px);
  }
   100%{
    transform: translateX(0px);
  }
}

  .animation{
    animation: move 2s infinite;
  }

  .blue{
    background-color: blue;
  }

  .pink{
    background-color: pink;
  }

  .transition{
    transition: 2s ease;
  }





  .start{
    height: 0px;
  }

  .end{
    height: 90px;
  }

.collapse { 
  transition: height .5s ease;
  overflow: hidden;
}


</style>